<template>
  <div class="app-container2 zhenduan_baobiao">
    <div class="search_wrap">
      <div class="search_top">
        <div class="top_left">
          <div class="search_item">
            <div class="name">诊断时间段</div>
            <div class="ipt">
              <el-date-picker
                type="daterange"
                class="jk_common_date_picker000"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :append-to-body="false"
                v-model="pickerValue"
              >
              </el-date-picker>
            </div>
            <div class="other_warp">
              <div class="other_item act">日</div>
              <div class="other_item">月</div>
              <div class="other_item">年</div>
            </div>
          </div>
        </div>
        <div class="top_right">
          <div class="btns_item">
            <img src="../../../assets/images/daoru_icon.png" alt="" />
            <div>导入</div>
          </div>
          <div class="btns_item">
            <img src="../../../assets/images/setting_icon.png" alt="" />
            <div>设置</div>
          </div>
        </div>
      </div>
      <div class="search_bottom">
        <div class="btm_search_item">
          <div class="name">诊断规则</div>
          <div class="ipt">
            <el-input
              class="jk_common_input000"
              v-model="guizeValue"
              placeholder="请输入规则"
            ></el-input>
          </div>
        </div>
        <div class="btm_search_item">
          <div class="name">设备类型</div>
          <div class="ipt">
            <el-select
              class="jk_common_select000"
              v-model="typeValue"
              popper-class="js_common_fenyeqi_popper"
              placeholder="请选择类型"
            >
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="btm_search_item">
          <div class="name">设备名称</div>
          <div class="ipt">
            <el-input
              class="jk_common_input000"
              v-model="nameValue"
              placeholder="请输入名称"
            ></el-input>
          </div>
        </div>
        <div class="btm_btn">查询</div>
      </div>
    </div>
    <div class="line_wrap"></div>
    <div class="table_main">
      <el-table
        class="jk_common_table000"
        style="width: 100%; height: 100%"
        height="style"
        :data="tableData"
      >
        <el-table-column label="序号">
          <template slot-scope="scop">
            <div class="xuhao_warp">
              {{ (scop.$index + 1 + "").padStart(2, "0") }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="设备名称"></el-table-column>
        <el-table-column prop="type" label="设备类型"></el-table-column>
        <el-table-column prop="time" label="故障诊断时间"></el-table-column>
        <el-table-column prop="rules" label="故障诊断规则"></el-table-column>
        <el-table-column prop="treeName" label="故障树名称"></el-table-column>
        <el-table-column prop="result" label="故障诊断结果"></el-table-column>
      </el-table>
    </div>
    <div class="fenye_main">
      <el-pagination
        class="jk_common_fenyeqi000"
        :current-page="1"
        :page-size="10"
        :pager-count="5"
        :append-to-body="false"
        popper-class="js_common_fenyeqi_popper"
        layout="total,prev, pager, next,sizes, jumper"
        :total="400"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pickerValue: [],
      guizeValue: "",
      typeValue: "",
      nameValue: "",
      typeOptions: [
        {
          value: "选项1",
          label: "通讯服务器",
        },
        {
          value: "选项2",
          label: "计算服务器",
        },
        {
          value: "选项3",
          label: "历史服务器",
        },
        {
          value: "选项4",
          label: "控制站",
        },
        {
          value: "选项5",
          label: "操作员站",
        },
      ],
      tableData: [
        {
          id: "001",
          name: "通讯服务器1",
          type: "通讯服务器",
          time: "2023-12-01 12:04:09",
          rules: " 服务器故障诊断规则1",
          treeName: "通信服务01-CS-A失效",
          result: "故障诊断结果1",
        },
        {
          id: "002",
          name: "通讯服务器1",
          type: "通讯服务器",
          time: "2023-12-01 12:04:09",
          rules: " 服务器故障诊断规则1",
          treeName: "通信服务01-CS-A失效",
          result: "故障诊断结果1",
        },
        {
          id: "003",
          name: "通讯服务器1",
          type: "通讯服务器",
          time: "2023-12-01 12:04:09",
          rules: " 服务器故障诊断规则1",
          treeName: "通信服务01-CS-A失效",
          result: "故障诊断结果1",
        },
        {
          id: "004",
          name: "通讯服务器1",
          type: "通讯服务器",
          time: "2023-12-01 12:04:09",
          rules: " 服务器故障诊断规则1",
          treeName: "通信服务01-CS-A失效",
          result: "故障诊断结果1",
        },
        {
          id: "005",
          name: "通讯服务器1",
          type: "通讯服务器",
          time: "2023-12-01 12:04:09",
          rules: " 服务器故障诊断规则1",
          treeName: "通信服务01-CS-A失效",
          result: "故障诊断结果1",
        },
        {
          id: "006",
          name: "通讯服务器1",
          type: "通讯服务器",
          time: "2023-12-01 12:04:09",
          rules: " 服务器故障诊断规则1",
          treeName: "通信服务01-CS-A失效",
          result: "故障诊断结果1",
        },
        {
          id: "007",
          name: "通讯服务器1",
          type: "通讯服务器",
          time: "2023-12-01 12:04:09",
          rules: " 服务器故障诊断规则1",
          treeName: "通信服务01-CS-A失效",
          result: "故障诊断结果1",
        },
        {
          id: "008",
          name: "通讯服务器1",
          type: "通讯服务器",
          time: "2023-12-01 12:04:09",
          rules: " 服务器故障诊断规则1",
          treeName: "通信服务01-CS-A失效",
          result: "故障诊断结果1",
        },
        {
          id: "009",
          name: "通讯服务器1",
          type: "通讯服务器",
          time: "2023-12-01 12:04:09",
          rules: " 服务器故障诊断规则1",
          treeName: "通信服务01-CS-A失效",
          result: "故障诊断结果1",
        },
        {
          id: "010",
          name: "通讯服务器1",
          type: "通讯服务器",
          time: "2023-12-01 12:04:09",
          rules: " 服务器故障诊断规则1",
          treeName: "通信服务01-CS-A失效",
          result: "故障诊断结果1",
        },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
.zhenduan_baobiao {
  background: linear-gradient(
    180deg,
    rgba(21, 52, 104, 0.5),
    rgba(12, 29, 57, 0.5)
  );
  box-sizing: border-box;
  padding: 25px 25px 15px;
  display: flex;
  flex-direction: column;
  .search_wrap {
    flex: 0 0 auto;
    .search_top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      .top_left {
        .search_item {
          display: flex;
          align-items: center;
          .name {
            width: 80px;
            font-size: 16px;
            color: #e0efff;
            text-align: right;
            margin-right: 14px;
          }
          .ipt {
            width: 260px;
          }
          .other_warp {
            display: flex;
            align-items: center;
            .other_item {
              width: 50px;
              height: 36px;
              box-sizing: border-box;
              border: 2px solid #2d3c67;
              margin-left: 10px;
              line-height: 32px;
              text-align: center;
              font-size: 16px;
              color: #6a7bad;
              cursor: pointer;
              &:hover {
                opacity: 0.9;
                color: #91c5ff;
              }
              &.act {
                color: #91c5ff;
              }
            }
          }
        }
      }
      .top_right {
        display: flex;
        align-items: center;
        .btns_item {
          height: 40px;
          padding: 0 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #004dad;
          border-radius: 6px;
          font-size: 16px;
          color: #fff;
          margin-left: 12px;
          & > img {
            margin-right: 8px;
          }
        }
      }
    }
    .search_bottom {
      display: flex;
      align-items: center;
      .btm_search_item {
        display: flex;
        align-items: center;
        margin-right: 30px;
        .name {
          width: 80px;
          font-size: 16px;
          color: #e0efff;
          text-align: right;
          margin-right: 14px;
        }
      }
      .btm_btn {
        padding: 0 30px;
        height: 40px;
        background: #007f72;
        text-align: center;
        line-height: 40px;
        font-size: 16px;
        color: #fff;
        border-radius: 6px;
      }
    }
  }
  .line_wrap {
    width: 100%;
    height: 2px;
    background: #364775;
    position: relative;
    margin: 30px 0 18px;
    &::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 84px;
      background-color: #0065e3;
    }
  }
  ::v-deep .table_main {
    flex: 1 1 auto;
    width: 100%;
    height: 0;
    .xuhao_warp {
      display: block;
      margin: 0 auto;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      line-height: 28px;
      text-align: center;
      font-size: 14px;
      color: #91c5ff;
      background: linear-gradient(
        0deg,
        #3d547d 0%,
        rgba(52, 72, 109, 0) 49%,
        rgba(52, 72, 109, 0) 100%
      );
    }
  }
  .fenye_main {
    flex: 0 0 auto;
    margin-top: 18px;
  }
}
</style>
